<!DOCTYPE html>
<html>

	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/public.css" />
		<link rel="stylesheet" type="text/css" href="css/phone.css" />
	</head>
	<style type="text/css">
		body> div.page1mailcontent> form> div.one> input.ptShuru {
			width: 40%;
		}
		
		#btnSendCode {
			font-family: "微软雅黑";
			font-size: 1rem;
			width: 25%;
			height: 3rem;
			background: #FFFFFF;
			color: #232323;
			border: 2px solid #D1D1D1;
			border-radius: 10px;
			vertical-align: top;
			margin-top: 0.5rem;
		}
		
		body> div.page1mailcontent> form> div.one> label {
			padding-left: 1rem;
		}
		
		body> div> form> div.mail> input,
		body> div> form> div.identity> input[type="text"] {
			width: 50%;
		}
		
		#bd,
		#jb,
		#bd1,
		#jb1 {
			display: inline-block;
			width: 30%;
			height: 3rem;
			margin: 2rem 9.2%;
			background: url(img/Teacher/wcbtnbg.png) no-repeat;
			background-size: 100% 100%;
			border: none;
			outline: none;
			font-family: "微软雅黑";
			font-size: 1.6rem;
			color: #FFFFFF;
		}
		
		body> div> form> div.mail,
		body> div> form> div.identity {
			background: #eee;
		}
		
		body> div> form:nth-child(1)> div.mail> input,
		body> div> form:nth-child(2)> div> input {
			background: #eee;
		}
	</style>

	<body>
		<p>
			更改绑定
		</p>
		<!--================page1mailcontent=================-->
		<div class="page1mailcontent">
			<form action="" method="post" name="my_f1" onsubmit="return check(this);">
				<!--手机号-->
				<div class="mail">
					<lable class="phone1">手&nbsp;&nbsp;机&nbsp;&nbsp;号：</lable>
					<input class="phone" disabled="disabled" type="text" name="name" required pattern="^1[3|4|5|8][0-9]\d{8}$" oninvalid="setCustomValidity('请输入正确手机号');" oninput="setCustomValidity('');" maxlength="11" draggable="" />
				</div>
				<!--邮箱end-->
				<!--验证码-->
				<div class="one">
					<label for="passwords">验&nbsp;&nbsp;证&nbsp;&nbsp;码：</label>
					<input class="ptShuru" name="" type="text" required="required" oninvalid="setCustomValidity('请输入验证码');" oninput="setCustomValidity('');" /><input type="button" class="send" id="btnSendCode" value="发送" onClick="sendMessage()" />
					<!--onClick="sendMessage()"-->
				</div>
				<!--验证码end-->
				<input type="submit" id="bd" value="绑&nbsp;&nbsp;定" />
				<input type="button" id="jb" value="解&nbsp;&nbsp;绑" />
			</form>
			<form action="" method="post">

				<!--身份证-->
				<div class="identity">

					<lable>身&nbsp;&nbsp;份&nbsp;&nbsp;证：</lable>
					<input type="text" disabled="disabled" class="identity1" maxlength="18" />
				</div>
				<!--身份证end-->

				<input type="submit" id="bd1" value="绑&nbsp;&nbsp;定" />
				<input type="button" id="jb1" value="解&nbsp;&nbsp;绑" />
			</form>
		</div>
		<!--page1mailcontent结束-->
	</body>
	<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/font.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var InterValObj; //timer变量，控制时间
		var count = 60; //间隔函数，1秒执行
		var curCount; //当前剩余秒数
		var code = ""; //验证码
		var codeLength = 6; //验证码长度
		function sendMessage() {
			//	console.log("1")
			curCount = count;
			var dealType; //验证方式
			var uid = $("#uid").val(); //用户uid
			if($("#phone").attr("checked") == true) {
				dealType = "phone";
			} else {
				dealType = "email";
			}
			////判定手机号是否正确
			//var reg = /^1[3|4|5|8][0-9]\d{8}$/
			//if ($(".phone").val("")==" " || !reg.test($(".phone").val(""))) {
			//	console.log("1")
			//	$("#btnSendCode").on("click",function(){
			//		alert("1")
			//	})
			//	
			//} else{
			//	$("#btnSendCode").on("click",function(){
			//		sendMessage()
			//	})
			//}
			//产生验证码
			for(var i = 0; i < codeLength; i++) {
				code += parseInt(Math.random() * 9).toString();
			}
			//设置button效果，开始计时
			$("#btnSendCode").attr("disabled", "true");
			$("#btnSendCode").val("重新发送(" + curCount + ")");
			InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
			//向后台发送处理数据
			$.ajax({
				type: "POST", //用POST方式传输
				dataType: "text", //数据格式:JSON
				url: 'Login.ashx', //目标地址
				data: "dealType=" + dealType + "&uid=" + uid + "&code=" + code,
				error: function(XMLHttpRequest, textStatus, errorThrown) {},
				success: function(msg) {}
			});
		}
		//timer处理函数
		function SetRemainTime() {
			if(curCount == 0) {
				window.clearInterval(InterValObj); //停止计时器
				$("#btnSendCode").removeAttr("disabled"); //启用按钮
				$("#btnSendCode").val("重新发送");
				code = ""; //清除验证码。如果不清除，过时间后，输入收到的验证码依然有效    
			} else {
				curCount--;
				$("#btnSendCode").val("重新发送(" + curCount + ")");
			}
		}
//		$(".bd").on("click", function() {
//			$('.phone,.ptShuru').attr("disabled", "disabled")
//			console.log("1")
//			$('.mail,.phone,.one,.ptShuru,#btnSendCode').css('background', '#eee')
//		})
		$("#jb").on("click", function() {
			$('.phone,.ptShuru').removeAttr("disabled", "disabled")
			console.log("2")
			$('.mail,.phone,.one,.ptShuru,#btnSendCode').css('background', '#fff')
		})
//		$(".bd1").on("click", function() {
//			$('.identity1').attr("disabled", "disabled")
//			console.log("1")
//			$('.identity,.identity1').css('background', '#eee')
//		})
		$("#jb1").on("click", function() {
			$('.identity1').removeAttr("disabled", "disabled")
			console.log("2")
			$('.identity,.identity1').css('background', '#fff')
		})
	</script>

</html>